<template>
  <div
    class="data-column"
    :class="[customClass]"
    v-bind="layoutProps"
    :style="boxStyle"
    :key="widget.id"
    v-show="!widget.options.hidden"
  >
    <el-table
      :data="tableData"
      border
      size="mini"
      @cell-click="(row, column) => handleClick({ column })"
    >
      <el-table-column
        v-for="item in headData"
        :v-if="item.visible"
        :key="item.value"
        :prop="item.value"
        :label="item.label"
        :class-name="item.current ? 'cellSelected' : ''"
      >
        <template slot-scope="{ row }">
          {{ item.value }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        v-if="operateColumn"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="viewRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            查看
          </el-button>
          <el-button
            @click.native.prevent="addRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            新增
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import emitter from "@/utils/emitter";
import i18n from "../../../utils/i18n";
import refMixin from "../refMixin";
import FieldComponents from "@/components/form-designer/form-widget/field-widget/index";

export default {
  name: "DataColumnItem",
  componentName: "DataColumnItem",
  mixins: [emitter, i18n, refMixin],
  components: {
    ...FieldComponents,
  },
  props: {
    widget: Object,
    widget: Object,
    fatherData: Object,
    colHeight: {
      type: String,
      default: null,
    },
  },
  inject: ["refList", "globalModel", "formConfig", "previewState"],
  data() {
    return {
      layoutProps: {
        span: this.widget.options.span,
        md: this.widget.options.md || 12,
        sm: this.widget.options.sm || 12,
        xs: this.widget.options.xs || 12,
        offset: this.widget.options.offset || 0,
        push: this.widget.options.push || 0,
        pull: this.widget.options.pull || 0,
      },
    };
  },
  computed: {
    customClass() {
      return this.widget.options.customClass || "";
    },
    headData() {
      if(!this.widget.rows || !this.widget.rows[0]){
        return [];
      }
      const colsData = this.widget.rows[0].cols.map(v=>({
        label:v.title,
        value:v.value,
      }));
      return colsData;
    },

    boxStyle() {
      const initStyle = this.widget.options.initStyle || {};
      if (!initStyle) {
        return {};
      }
      const style = {
        width:
          initStyle.width && initStyle.width.indexOf("%") > -1
            ? initStyle.width
            : initStyle.width + "px",
        // height:initStyle.height&&initStyle.height.indexOf('%') > -1 ? initStyle.height : initStyle.height + 'px',
        minHeight:
          initStyle.minHeight && initStyle.minHeight.indexOf("%") > -1
            ? initStyle.height
            : initStyle.height + "px",
        backgroundColor: initStyle.backgroundColor,
        color: initStyle.color,
        margin: this.getNumber(initStyle.margin),
        padding: this.getNumber(initStyle.padding),
        textAlign: initStyle.textAlign,
      };
      return style;
    },
  },
  created() {
    this.initLayoutProps();
    this.initRefList();
  },
  methods: {
    getNumber(num){
      if(Number(num) || Number(num)===0){
        return `${num}px`
      }
      if(num.indexOf(',')>-1){
        const newData = num.split(',');
        const newDataPx= newData.map(v=>(`${v}px`));
        return newDataPx.join(' ');
      }
      
      if(isNaN(Number(num))){
        return 0;
      }
      return `${num}px`
    },
    handleClick({ column }) {
      console.log("columncolumncolumn", column);
    },
    initLayoutProps() {
      if (this.widget.options.responsive) {
        if (this.previewState) {
          this.layoutProps.md = undefined;
          this.layoutProps.sm = undefined;
          this.layoutProps.xs = undefined;

          let lyType = this.formConfig.layoutType;
          if (lyType === "H5") {
            this.layoutProps.span = this.widget.options.xs || 12;
          } else if (lyType === "Pad") {
            this.layoutProps.span = this.widget.options.sm || 12;
          } else {
            this.layoutProps.span = this.widget.options.md || 12;
          }
        } else {
          this.layoutProps.span = undefined;
        }
      } else {
        this.layoutProps.md = undefined;
        this.layoutProps.sm = undefined;
        this.layoutProps.xs = undefined;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
div.data-column {
  padding: 5px;
  box-sizing: border-box;
  overflow-x: scroll;
  &.noEntity {
    border: 1px dashed red;
  }
  table.table-layout {
    width: 100%;
    text-align: center;
    //border: 1px solid #c8ebfb;
    border-collapse: collapse;
    table-layout: fixed;
    .header {
      width: 120px;
      min-width: 100px;
      padding: 5px;
      overflow: hidden;
      border: 1px dashed #336699;
      &.noAttr {
        border: 1px dashed red;
      }
      .headerContent {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        // width: 200px;
        font-size: 14px;
        height: 48px;
        line-height: 48px;
      }
    }
    ::v-deep td {
      height: 48px;
      border: 1px dashed #336699;
      padding: 3px;
      display: table-cell;
    }

    .form-widget-list {
      // border: 1px dashed #336699;
      min-height: 36px;
    }
  }
}

.data-column.selected {
  outline: 2px solid $--color-primary !important;
}
</style>
